<template>
	<view v-if="goods">
		<view v-for="(shop, index) in goods" :key="index" class="shopGoods">
			<view class="shopBanner">
				<image class="image" :src="shop.info.shopLogo" alt="" />
				<view class="shopName">
					{{ shop.info.shopName }}
				</view>
			</view>
			<view>
				<view v-for="(good, index) in shop.goods" :key="index" class="good">
					<view @click="checkGood(index)">
						<image class="image" :src="good.cover" :alt="good.title" />
					</view>
					<view class="info">
						<view>{{ formateTitle(good.title)}}</view>
						<view>
							<view class="price"><span class='span' >¥</span>{{ good.price }}</view>
							<view class="count">x{{ good.count }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			goods: {
				type: Object,
				default () {
					return undefined;
				},
			},
		},
		data() {
			return {};
		},
		computed: {},
		watch: {},
		methods: {
			formateTitle(title) {
				return title.slice(0, 20) + "...";
			},
			checkGood(id) {
				uni.navigateTo({
					url: `/pages/detail/Detail?id=${id}`,
				})
			},
		},
		created() {},
		mounted() {},
	};
</script>
<style lang="scss" scoped>
	.shopGoods {
		background-color: white;
		border-radius: 20rpx;
		margin: 20rpx 0;
	}

	.shopBanner {
		display: flex;
		flex-direction: row;
		width: 95vw;
		margin: 0 auto;
		box-sizing: border-box;
		height: 120rpx;
		align-items: center;
	}

	.shopBanner .image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.shopName {
		margin-left: 10rpx;
		font-weight: 550;
	}

	.good {
		display: flex;
		flex-direction: row;
		width: 95vw;
		margin: 0 auto;
		padding: 20rpx 0;
	}

	.good .image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.info {
		width: calc(95vw - 200rpx);
		margin-left: 20rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.info>view:first-child {
		font-size: 34rpx;
	}

	.info>view:nth-child(2) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.price {
		color: red;
		font-size: 36rpx;
		text-align: right;
	}

	.price > .span {
		font-size: 26rpx;
	}

	.count {
		color: rgb(152, 152, 152);
	}
</style>
